<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>路由的嵌套</title>
</head>

<body>
    <div class="app">
        <!-- 第二步 创建链接 其中router-link相当于a标签 是一个声明导航 to等于href属性 -->
        <router-link to="/user">用户界面</router-link>
        <router-link to="/login">登录界面</router-link>
        <!-- 第三步 占位符 -->
        <router-view></router-view>
    </div>
    <!-- 第一步 引入库文件 -->
    <script src="./lib/vue_2.5.22.js"></script>
    <script src="./lib/vue-router_3.0.2.js"></script>
    <script>
        var Details1 = {
            template: `
                      <h3>商品1</h3>
                      `
        }

        var Details2 = {
            template: `
                      <h3>商品2</h3>
                      `
        }
        const User = {
            template: `
         <div>
                <h1>用户界面</h1>
                <hr/>
                <router-link to="/user/dal1">商品一</router-link>
                <router-link to="/user/dal2">商品二</router-link>
                <router-view></router-view>
        </div>
           `
        }
        const Login = {
            template: `
          <h1>登录界面</h1>
           `
        }
        // 配置路由规则
        var router = new VueRouter({
            routes: [
                { path: '/', redirect: 'login' },
                {
                    path: '/user', component: User, children: [
                        { path: 'dal1', component: Details1 },
                        { path: 'dal2', component: Details2 }
                    ]
                },
                { path: '/login', component: Login }
            ]
        })

        // 创建vue实例对象
        var xm = new Vue({
            el: '.app',
            data: {},
            // 挂载到实例对象上
            router

        })
    </script>
</body>

</html>